<template>
  <div class="settings">
    <div class="settings-header">
      <h2>设置</h2>
    </div>

    <div class="settings-content">
      <!-- 个人信息设置 -->
      <div class="settings-section">
        <h3>个人信息</h3>
        <div class="profile-settings">
          <div class="avatar-setting">
            <img :src="currentUser.avatar" alt="avatar" class="current-avatar">
            <button class="change-avatar-btn" @click="changeAvatar">
              <i class="iconfont icon-camera"></i>
              更换头像
            </button>
          </div>
          <div class="form-group">
            <label>昵称</label>
            <input type="text" v-model="currentUser.nickname" placeholder="输入昵称">
          </div>
          <div class="form-group">
            <label>个性签名</label>
            <input type="text" v-model="currentUser.signature" placeholder="设置个性签名">
          </div>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="settings-section">
        <h3>通知设置</h3>
        <div class="notification-settings">
          <div class="setting-item">
            <span>新消息通知</span>
            <label class="switch">
              <input type="checkbox" v-model="settings.notifications.message">
              <span class="slider"></span>
            </label>
          </div>
          <div class="setting-item">
            <span>声音提醒</span>
            <label class="switch">
              <input type="checkbox" v-model="settings.notifications.sound">
              <span class="slider"></span>
            </label>
          </div>
          <div class="setting-item">
            <span>桌面通知</span>
            <label class="switch">
              <input type="checkbox" v-model="settings.notifications.desktop">
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 隐私设置 -->
      <div class="settings-section">
        <h3>隐私设置</h3>
        <div class="privacy-settings">
          <div class="setting-item">
            <span>显示在线状态</span>
            <label class="switch">
              <input type="checkbox" v-model="settings.privacy.showOnline">
              <span class="slider"></span>
            </label>
          </div>
          <div class="setting-item">
            <span>显示已读状态</span>
            <label class="switch">
              <input type="checkbox" v-model="settings.privacy.showRead">
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 主题设置 -->
      <div class="settings-section">
        <h3>主题设置</h3>
        <div class="theme-settings">
          <div class="theme-selector">
            <div 
              v-for="theme in themes" 
              :key="theme.id"
              :class="['theme-option', { active: settings.theme === theme.id }]"
              @click="changeTheme(theme.id)"
            >
              <div class="theme-preview" :style="{ background: theme.color }"></div>
              <span>{{ theme.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 存储设置 -->
      <div class="settings-section">
        <h3>存储空间</h3>
        <div class="storage-settings">
          <div class="storage-info">
            <div class="storage-bar">
              <div 
                class="storage-used" 
                :style="{ width: `${(storage.used / storage.total) * 100}%` }"
              ></div>
            </div>
            <div class="storage-text">
              已使用 {{ formatSize(storage.used) }} / {{ formatSize(storage.total) }}
            </div>
          </div>
          <button class="clear-cache-btn" @click="clearCache">
            <i class="iconfont icon-delete"></i>
            清除缓存
          </button>
        </div>
      </div>

      <!-- 关于信息 -->
      <div class="settings-section">
        <h3>关于</h3>
        <div class="about-info">
          <p>版本：1.0.0</p>
          <p>开发者：Your Name</p>
          <div class="links">
            <a href="#" @click="checkUpdate">检查更新</a>
            <a href="#" @click="showPrivacyPolicy">隐私政策</a>
            <a href="#" @click="showTerms">服务条款</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 保存按钮 -->
    <div class="settings-footer">
      <button class="save-btn" @click="saveSettings">保存设置</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 当前用户信息
const currentUser = reactive({
  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=current-user',
  nickname: '用户名',
  signature: '这是一个个性签名'
})

// 设置选项
const settings = reactive({
  notifications: {
    message: true,
    sound: true,
    desktop: false
  },
  privacy: {
    showOnline: true,
    showRead: true
  },
  theme: 'default'
})

// 主题选项
const themes = [
  { id: 'default', name: '默认蓝', color: '#1976d2' },
  { id: 'dark', name: '暗夜黑', color: '#2c3e50' },
  { id: 'green', name: '清新绿', color: '#4caf50' },
  { id: 'purple', name: '优雅紫', color: '#9c27b0' }
]

// 存储信息
const storage = reactive({
  used: 1.5 * 1024 * 1024 * 1024, // 1.5GB
  total: 5 * 1024 * 1024 * 1024    // 5GB
})

// 更换头像
const changeAvatar = () => {
  // 实现头像更换逻辑
  console.log('Changing avatar')
}

// 更换主题
const changeTheme = (themeId) => {
  settings.theme = themeId
  // 实现主题切换逻辑
  console.log('Changing theme to:', themeId)
}

// 清除缓存
const clearCache = () => {
  // 实现清除缓存逻辑
  console.log('Clearing cache')
}

// 检查更新
const checkUpdate = () => {
  // 实现检查更新逻辑
  console.log('Checking for updates')
}

// 显示隐私政策
const showPrivacyPolicy = () => {
  // 实现显示隐私政策逻辑
  console.log('Showing privacy policy')
}

// 显示服务条款
const showTerms = () => {
  // 实现显示服务条款逻辑
  console.log('Showing terms of service')
}

// 保存设置
const saveSettings = () => {
  // 实现保存设置逻辑
  console.log('Saving settings:', settings)
}

// 格式化文件大小
const formatSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
</script>

<style scoped>
.settings {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.settings-header {
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
}

.settings-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.settings-section {
  margin-bottom: 30px;
}

.settings-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

/* 个人信息设置样式 */
.profile-settings {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.avatar-setting {
  display: flex;
  align-items: center;
  gap: 20px;
}

.current-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #e6e6e6;
}

.change-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #f5f7fb;
  cursor: pointer;
  transition: all 0.3s;
}

.change-avatar-btn:hover {
  background: #e3f2fd;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  color: #666;
}

.form-group input {
  padding: 8px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  font-size: 14px;
}

/* 开关样式 */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #1976d2;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* 主题设置样式 */
.theme-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 16px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.theme-preview {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.theme-option.active .theme-preview {
  border-color: #1976d2;
  transform: scale(1.05);
}

/* 存储设置样式 */
.storage-info {
  margin-bottom: 15px;
}

.storage-bar {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.storage-used {
  height: 100%;
  background: #1976d2;
  transition: width 0.3s;
}

.storage-text {
  font-size: 12px;
  color: #666;
}

.clear-cache-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #f5f7fb;
  cursor: pointer;
  transition: all 0.3s;
}

.clear-cache-btn:hover {
  background: #e3f2fd;
}

/* 关于信息样式 */
.about-info {
  color: #666;
}

.links {
  margin-top: 10px;
  display: flex;
  gap: 20px;
}

.links a {
  color: #1976d2;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}

/* 底部保存按钮 */
.settings-footer {
  padding: 20px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  justify-content: flex-end;
}

.save-btn {
  padding: 8px 24px;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.save-btn:hover {
  background: #1565c0;
}
</style> 